<template>
  <van-tabbar v-model="active" active-color="#00682f" route>
    <van-tabbar-item v-for="(item, index) in tabConfig" :key="index" :to="item.path">
      <!-- 标签页文本内容 -->
      <span>{{ item.title }}</span>
      <!-- 定义标签页图标 -->
      <template #icon="props">
        <img :src="props.active ? iconSrc[item.icon_active] : iconSrc[item.icon]" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from "vue";
import imgHome from "../assets/imgs/tabbar/home.png";
import imgHomeActive from "../assets/imgs/tabbar/home_active.png";
import imgClub from "../assets/imgs/tabbar/club.png";
import imgClubActive from "../assets/imgs/tabbar/club_active.png";
import imgOrders  from "../assets/imgs/tabbar/orders.png";
import imgOrdersActive from "../assets/imgs/tabbar/orders_active.png";
import imgMine from "../assets/imgs/tabbar/mine.png";
import imgMineActive from "../assets/imgs/tabbar/mine_active.png";

const active = ref(0)
const tabConfig = ref([
  {
    icon: "home",
    icon_active: "home_active",
    title: "首页",
    path: "/home",
  },
  {
    icon: "club",
    icon_active: "club_active",
    title: "星享俱乐部",
    path: "/club",
  },
  {
    icon: "orders",
    icon_active: "orders_active",
    title: "订单",
    path: "/orders",
  },
  {
    icon: "mine",
    icon_active: "mine_active",
    title: "我的",
    path: "/mine",
  },
])
const iconSrc = ref({
  home: imgHome,
  home_active: imgHomeActive,
  club: imgClub,
  club_active: imgClubActive,
  orders:imgOrders ,
  orders_active: imgOrdersActive,
  mine: imgMine,
  mine_active: imgMineActive,
})


</script>

<style lang="scss" scoped></style>
